<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Axios</title>
  </head>
  <body>
    <script>
      // Axios构造函数
      function Axios(config) {
        // 默认配置
        this.defaults = config;
        // 拦截器
        this.interceptors = {
          request: {},
          response: {},
        };
      }

      // 原型方法 axios发起请求方法
      Axios.prototype.request = function (config) {
        console.log("axios发起请求：", config.method);
      };
      Axios.prototype.get = function (config) {
        config.method = "GET";
        return this.request(config);
      };
      Axios.prototype.post = function (config) {
        config.method = "POST";
        return this.request(config);
      };

      function createInstance(config) {
        // 构造方法实例化一个对象
        const context = new Axios(config);
        // 创建一个实例，该实例等价于 Axios原型上的函数request
        // instance()可以当作函数使用了，绑定它的this到context
        const instance = Axios.prototype.request.bind(context);

        // 为这个实例函数，添加Axios原型上的方法
        Object.keys(Axios.prototype).forEach((key) => {
          instance[key] = Axios.prototype[key].bind(context);
        });

        // 把context上的成员添加到实例上
        Object.keys(context).forEach((key) => {
          instance[key] = context[key];
        });

        console.dir(instance);
        return instance;
      }

      const axios = createInstance({});

      // axios({ method: "GET" });
      axios.post({});
    </script>
  </body>
</html>
